<!-- 顶部导航栏，包含登录状态、错误提示与导航链接 -->
<template>
  <div>
    <el-menu mode="horizontal" router>
      <el-menu-item index="/dashboard">首页</el-menu-item>
      <el-menu-item index="/users">用户</el-menu-item>
      <el-menu-item index="/form">表单</el-menu-item>
      <el-menu-item index="/comm">通信</el-menu-item>
      <el-menu-item index="/directive">指令</el-menu-item>
      <el-menu-item index="/i18n">i18n</el-menu-item>
      <div class="spacer"></div>
      <template v-if="isAuthenticated">
        <span>欢迎，{{ user && user.name }}</span>
        <el-button type="text" @click="logout">{{ $t('logout') }}</el-button>
      </template>
      <template v-else>
        <router-link to="/login">{{ $t('login') }}</router-link>
      </template>
    </el-menu>
    <el-alert v-if="lastError" :title="`错误：${lastError.message} (${lastError.status})`" type="error" show-icon />
    <hr />
  </div>
</template>

<script>
export default {
  name: 'TopNavBar',
  computed: {
    user() { return this.$store.state.auth.user },
    isAuthenticated() { return this.$store.getters['auth/isAuthenticated'] },
    lastError() { return this.$store.state.error.lastError }
  },
  methods: {
    logout() { this.$store.dispatch('auth/logout') }
  }
}
</script>

<style>
.spacer { flex:1 }
.error { background:#ffecec; color:#c00; padding:8px; margin:8px 0; }
</style>
